<template>
  <div class="serach-result">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="`${$route.query.q}的搜索结果`"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <!-- 文章列表 -->
    <div class="list-content">
      <van-list
        class="article-list"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in keyContent" :key="item.art_id" :title="item.title" @click="skipConent(item)"/>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getSearch } from '@/api/search'
export default {
  data () {
    return {
      page: 1, // 当前页
      keyContent: [], // 当前关键字的内容
      loading: false, // 等待加载
      finished: false// 加载数据全部完毕
    }
  },
  methods: {
    // 页面渲染
    loadContent () {
      // 调用接口
      getSearch(this.$route.query.q, this.page).then((res) => {
        console.log(res)
        const newContent = res.data.data.results// 返回真实数据
        this.keyContent = [...this.keyContent, ...newContent] // 在数组中添加新的获取到的数据
        // 如果没有数据了则为TRUE
        if (newContent.length === 0) {
          this.finished = true
        }
        this.loading = false
        this.page++ // 当前页+1
      })
    },
    onLoad () {
      this.loadContent()
    },
    skipConent (item) {
      this.$router.push({
        path: '/detail',
        query: {
          id: item.art_id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
 /deep/.van-nav-bar .van-icon {
    color: white;
  }
</style>
